<template>
   <div class="status-container">
      <s-card title="设备信息">
         <s-form :label-col="2">
            <s-form-item label="硬件版本号">
               {{ state.basicInfo.hardwareversion }}
            </s-form-item>
            <s-form-item label="软件版本号">
               {{ state.basicInfo.softwareversion }}
            </s-form-item>
            <s-form-item label="序列号">
               {{ state.basicInfo.seriesnumber }}
            </s-form-item>
            <s-form-item label="设备状态">
               {{ state.basicInfo.devicestatus }}
            </s-form-item>
            <s-form-item label="注册信息">
               {{ state.basicInfo.registerstate }}
            </s-form-item>
            <s-form-item label="所用网络">
               {{ state.basicInfo.usenetwork }}
            </s-form-item>
            <s-form-item label="供电方式">
               {{ powerType[state.basicInfo['power-mode']] }}
            </s-form-item>
         </s-form>
         <s-form-item
            label="剩余电量"
            v-if="state.basicInfo['power-mode'] === 1"
            :label-col="2"
         >
            {{ state.basicInfo.capacity }}%
         </s-form-item>
      </s-card>
      <s-card title="网络信息">
         <s-form :label-col="2">
            <s-form-item label="网络模式">
               {{ state.basicInfo['network-mode'] ? 'DHCP' : 'Static' }}
            </s-form-item>
            <s-form-item label="IP地址">
               {{ state.basicInfo.address }}
            </s-form-item>
            <s-form-item label="子网掩码">
               {{ state.basicInfo.subnetmask }}
            </s-form-item>
            <s-form-item label="网关">
               {{ state.basicInfo.gateway }}
            </s-form-item>
            <s-form-item label="MAC地址">
               {{ state.basicInfo.mac }}
            </s-form-item>
         </s-form>
      </s-card>
      <s-card title="4G信息">
         <s-form :label-col="2">
            <s-form-item label="固件版本">
               {{ state.simInfo['4g_version'] }}
            </s-form-item>
            <s-form-item label="IMEI">
               {{ state.simInfo['4g_IMEI'] }}
            </s-form-item>
            <s-form-item label="ICCID">
               {{ state.simInfo['4g_ICCID'] }}
            </s-form-item>
            <s-form-item label="信号强度">
               {{ state.simInfo['4g_signal_level'] }}
            </s-form-item>
            <s-form-item label="IP地址">
               {{ state.simInfo['4g_ipaddr'] }}
            </s-form-item>
            <s-form-item label="网络状态">
               {{
                  state.simInfo['4g_network_status'] ? '连接成功' : '连接失败'
               }}
            </s-form-item>
         </s-form>
      </s-card>
      <s-card title="广播信息">
         <s-form :label-col="2">
            <s-form-item label="广播编号">
               {{ state.brdInfo.IsBroadcast===1?state.brdInfo['BroadcastId']:'暂无广播' }}
            </s-form-item>
            <s-form-item label="广播来源">
               {{ state.brdInfo.IsBroadcast===1?getSourceTxt(state.brdInfo['BroadcastSource']):'--' }}
            </s-form-item>
            <s-form-item label="广播url">
               <div :style="{width:'70%'}">
                  {{ state.brdInfo.IsBroadcast===1?state.brdInfo['BroadcastUrl']:'--' }}
                  </div>
            </s-form-item>
            <s-form-item label="事件级别">
               {{ state.brdInfo.IsBroadcast===1?EventLevel[state.brdInfo['EventLevel']]:'--' }}
            </s-form-item>
            <s-form-item label="开始时间">
               {{ state.brdInfo.IsBroadcast===1?state.brdInfo['StartTime']:'--' }}
            </s-form-item>
            <s-form-item label="结束时间">
               {{ state.brdInfo.IsBroadcast===1?state.brdInfo['EndTime']:'--' }}
            </s-form-item>
         </s-form>
      </s-card>
   </div>
</template>

<script lang="ts" setup>
import { SCard, SForm, SFormItem } from "@/components"
import { getBasicInfo, getSimInfo, getBrdInfo } from "@/request"
import { onBeforeMount, reactive } from "vue"
import moment from "moment"
const powerType = ["交流电", "蓄电池", "直流电"]
const SourceType = [
   [0, "缺省"],
   [1, "平台"],
   [2, "适配器"],
   [3, "U 盘"],
   [4, "RS485-1"],
   [5, "RS485-2"],
   [6, "RS485-3"],
   [7, "RS485-4"],
   [8, "RS485-5"],
   [240, "开关量"]
]

const getSourceTxt = (value:number) => {
   const target = SourceType.find(item => item[0] === value)
   if (target) {
      return target[1]
   }
   return "--"
}
const EventLevel = ["缺省", "紧急广播", "应急演练", "日常广播"]

   // 4G信息
   interface SimInfo {
      "4g_IMEI": string;
      "4g_ICCID": string;
      "4g_signal_level": string;
      "4g_ipaddr": string;
      "4g_network_status": number;
      "4g_version": string;
   }

   // 广播信息
   interface BrdInfo {
      BroadcastId: string;
      BroadcastSource: number;
      BroadcastUrl: string;
      EventLevel: number;
      StartTime: number;
      EndTime: number;
      IsBroadcast:number
   }

   interface BasicInfo {
      productmodel?: string; // 产品名称
      seriesnumber: string; // 序列号
      hardwareversion: string; // 硬件版本
      softwareversion: string; // 软件版本
      devicestatus: string; // 设备状态
      registerid: string;
      mac: string;
      simver: string;
      address: string; // ip
      subnetmask: string; // 子网掩码
      gateway: string; // 网关
      "network-mode": string; // 模式
      "power-mode": number; // 供电方式  0-交流， 1-蓄电池
      capacity: number; // 电量
      registerstate: string; // 注册状态
      usenetwork: string; // 所用网络
   }

const state = reactive<{
      basicInfo: BasicInfo;
      simInfo: SimInfo;
      brdInfo: BrdInfo;
   }>({
      basicInfo: {
         seriesnumber: "",
         hardwareversion: "",
         softwareversion: "",
         devicestatus: "",
         registerid: "",
         mac: "",
         simver: "",
         address: "",
         subnetmask: "",
         gateway: "",
         "network-mode": "",
         "power-mode": 0,
         capacity: 0,
         registerstate: "",
         usenetwork: ""
      },
      simInfo: {
         "4g_IMEI": "",
         "4g_ICCID": "",
         "4g_signal_level": "",
         "4g_ipaddr": "",
         "4g_network_status": 0,
         "4g_version": ""
      },
      brdInfo: {
         BroadcastId: "",
         IsBroadcast: 0,
         BroadcastSource: 0,
         BroadcastUrl: "",
         EventLevel: 0,
         StartTime: 0,
         EndTime: 0
      }
   })

onBeforeMount(() => {
   getBasicInfo().then((data) => {
      state.basicInfo = data
   })
   getSimInfo().then((data) => {
      state.simInfo = data
   })
   getBrdInfo().then((data) => {
      const item = {
         ...data,
         StartTime: moment(data.StartTime * 1000).format("YYYY-MM-DD HH:mm:ss"),
         EndTime: moment(data.EndTime * 1000).format("YYYY-MM-DD HH:mm:ss")
      }
      state.brdInfo = item
   })
})
</script>

<style scoped lang="less">
   .status-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: @itemSpace;
   }
</style>
